import type {ProDescriptionsItemProps} from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React from 'react';
import type {DetailItem} from '../data';
import {Tag} from 'antd';
import {updateAdminRoleAccesses} from '../service';
import AuthPermissionConfiguration
  from '@/pages/System/Auth/AuthRole/components/AuthPermissionConfiguration';

const LockerDetail: React.FC<{
  id?: string;
  request: (id: string) => Promise<{ success: boolean; data?: DetailItem }>;
}> = ({id = '', request}) => {
  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '名称',
      dataIndex: 'name',
    },
    {
      label: '编号',
      dataIndex: 'id',
    },
    {
      label: '权限',
      dataIndex: 'permissions',
      editable: true,
      render: (_, record) => record?.permissions?.map(item => <Tag
          key={item.id}>{item.name}</Tag>),
      renderEdit: (_, {value, onChange}) => (
          <AuthPermissionConfiguration
              defaultValue={value}
              id={id}
              onChange={values => onChange && onChange(values)}
          />
      ),
      onSubmit: async val => {
        const res = await updateAdminRoleAccesses({
          roleId: id,
          permissions: val,
        });
        return res.code === 0;
      },
    },
  ];

  return (
      <ProDescriptions
          title='管理员账号角色详情'
          column={2}
          columns={columns}
          params={{id}}
          request={() => request(id)}
      />
  );
};

export default LockerDetail;
